<template>
    <div :style="{height:height,width:width}">
        <el-table :data="query.tableData" @sort-change="sortChange" :default-sort="schema.defaultSort" style='width:100%'>
            <template v-for="(col ,index) in schema.columns">
                <dx-table-column :type="col.type" v-if="col.codeType"
                    :code-type="col.codeType"
                    :fixed="col.fixed"
                    :prop="col.prop"
                    :label="col.title" 
                    :min-width="col.width" 
                    :sortable="col.sort"
                    :formatter="col.formatter"
                    :show-overflow-tooltip="col.ellipsis" :key="index">
                </dx-table-column>
                <el-table-column :type="col.type" v-else
                    :fixed="col.fixed"
                    :prop="col.prop"
                    :label="col.title" 
                    :min-width="col.width" 
                    :sortable="col.sort"
                    :formatter="col.formatter"
                    :show-overflow-tooltip="col.ellipsis" :key="index">
                </el-table-column>
            </template>
            <el-table-column v-if="schema.options" fixed="right" align="center" header-align="center" label="操作" :width="schema.options.width">
            <template slot-scope="scope">
                <template v-for="(btn,index) in schema.options.buttons">
                    <el-button v-if="btn.privilege" @click="handleButton(scope.row , btn.name)" :key="index" type="text" size="small" v-privilege="[$route.path,btn.label]">{{ btn.label}}</el-button>
                    <el-button v-else @click="handleButton(scope.row , btn.name)" type="text" :key="index" size="small">{{ btn.label}}</el-button>
                </template>
            </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-size="query.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="query.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import DxTableColumn from './dx-table-column'
import {codeProvider} from '../../../assets/js/provider.js'
export default {
    components : {
        DxTableColumn
    },
    name: "dx-table",
    props : {schema : Object , query : Object,width : String,height : String},
    data(){
        return {};
    },
    // watch : {
    //     'query.tableData'(val,newVal){
    //         this.notifyDataChange();
    //         console.log('data changed');
    //     }
    // },
    methods: {
        sortChange(obj){
            let orderBy = {};
            if(obj.order) {
                if (obj.order.substr(0, 1) === 'a') {
                    orderBy = obj.prop + " asc"
                }
                if (obj.order.substr(0, 1) === 'd') {
                    orderBy = obj.prop + " desc"
                }
            }
            this.$emit('search',{page : this.query.page ,pageSize:this.query.pageSize,orderBy: orderBy});
        },
        handleButton(row,name) {
            this.$emit('action', {'row': row ,'name' : name});
        },
        handleSizeChange(val) {
            this.$emit('search',{ page : this.query.page,pageSize: val ,orderBy: this.query.orderBy});
        },
        handleCurrentChange(val) {
            this.$emit('search',{ page : val ,pageSize: this.query.pageSize, orderBy: this.query.orderBy });
        },
        notifyDataChanged(){

            // let data = this.query.tableData;
            // for(let i=0; i< data.length;i++){
            //     this.schema.columns.forEach(item=>{

            //         let row = data[i];
            //         if(item.codeType){
            //             codeProvider.getName(item.codeType,row[item.prop],item.condition||{}).then(result=>{
            //                 row[item.prop+'_name'] = result;
            //                 this.$set(this.query.tableData, i, row);
            //             });
            //         }
            //     });

            // }
        }
    },
    created(){

    
        
    }
}
</script>